<script setup>
import * as  echarts from 'echarts'
import {onMounted, ref} from "vue";

const props = defineProps({
  width: {
    type: Number,
    default: 700
  },
  height: {
    type: Number,
    default: 500
  },
  title: {
    type: String,
    default: '标题'
  },
  xAxis: {
    type: Object,
    default: []
  },
  series: {
    type: Array,
    default: [{
      name:undefined,
      type:'bar',
      data:[]
    }]
  }
})
const echartsDom = ref(null)

onMounted(() => {
  const myChart = echarts.init(echartsDom.value)
  myChart.setOption({
    title: {
      text: props.title
    },
    tooltip: {},
    legend: {},
    xAxis: {
      data: props.xAxis
    },
    yAxis: {},
    series: props.series
  })
})
</script>

<template>
  <div :style="`width:${width}px;height:${height}px`" class="echarts" ref="echartsDom"></div>
</template>

<style scoped lang="scss">

</style>